/* eslint-disable implicit-arrow-linebreak */
// Third Party
import { useEffect, useState } from 'react'
import DataTable from 'react-data-table-component'
import { ChevronDown } from 'react-feather'
import { useDispatch, useSelector } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import { Card, CardBody, CardHeader, Col, Row } from 'reactstrap'

// Component
import BillingHeader from '../../components/Billing/bills/BillingHeader'
import FloatingBtn from '../../components/addAppointment/FloatingBtn'
import NotFound from '../../components/not-found'
import CustomPagination from '../../components/pagination/ReactPagination'
import CustomSpinner from '../../components/spinner/Spinner'
import {
  getAllBillingAction,
  handleLimitChange,
  handlePageChange
} from '../../redux/billing/billingAction'
import { resetBillingList } from '../../redux/billing/billingSlice'
import { columns } from './table.data'

const Billing = () => {
  const navigate = useNavigate()
  const dispatch = useDispatch()

  const [currentPage, setPage] = useState(0)

  const { getAllBillings, loading } = useSelector((state) => state.billing)
  const rows = getAllBillings?.data
  const limit = getAllBillings?.limit
  const count = getAllBillings?.count
  const offset = getAllBillings?.offset

  useEffect(() => {
    dispatch(getAllBillingAction({ offset, limit }))
    return () => {
      dispatch(resetBillingList())
    }
  }, [])

  // ** Changing Limit
  const handleLimit = (newLimit) => {
    dispatch(
      handleLimitChange({
        oldLimit: limit,
        newLimit
      })
    )
    setPage(0)
  }

  // ** Changing page
  const handlePagination = (page) => {
    const newOffset = page.selected * limit
    dispatch(
      handlePageChange({
        offset: newOffset === 0 ? 0 : newOffset,
        limit
      })
    )
    setPage(() => page.selected)
  }

  return (
    <div>
      <Card className="billingCard cardBgColor margin-bottom-0">
        <CardHeader className="billingCardHeader">
          <BillingHeader />
        </CardHeader>
        <CardBody className="billingCardBody">
          <Row>
            <Col lg={12} className="p-0">
              <div className="TablePadding">
                <h4 className="tableHaeding mb-0">Current Invoices</h4>

                <DataTable
                  pagination
                  paginationServer
                  rowsPerPage={limit}
                  progressPending={loading}
                  progressComponent={<CustomSpinner />}
                  noDataComponent={<NotFound />}
                  data={rows}
                  noHeader={true}
                  pointerOnHover
                  highlightOnHover
                  theme="solarized"
                  columns={columns(offset, limit)}
                  className="react-dataTable hide-header"
                  paginationDefaultPage={currentPage}
                  sortIcon={<ChevronDown size={10} />}
                  paginationComponent={() =>
                    CustomPagination({
                      limit,
                      handleLimit,
                      currentPage,
                      count,
                      handlePagination
                    })
                  }
                  onRowClicked={(row) =>
                    navigate('/bills/invoice', { state: row })
                  }
                />

                <FloatingBtn />
              </div>
            </Col>
          </Row>
        </CardBody>
      </Card>
    </div>
  )
}

export default Billing
